import React, { Component } from 'react'
import { connect } from 'dva';
import { Scrollbars } from 'react-custom-scrollbars';
import { Descriptions, Tag, Card } from 'antd';

const networkType = ['无网络', 'WIFI', '2G', '3G', '4G', '5G']
@connect(({ device, loading }) => ({
    device,
    loading: loading.effects['device/fetchDeviceInfo'],
}))

class DeviceInfo extends Component {

    render() {
        const deviceInfo = this.props.deviceInfo
        return (
            <Scrollbars
                autoHide
                autoHideTimeout={1000}
                autoHideDuration={200}
                style={{ height: '350px' }}
            >
                <Card bordered={false}>
                    {
                        JSON.stringify(deviceInfo) !== '{}' && <>
                            <Descriptions title="基本信息" column={3}>
                                <Descriptions.Item label="设备ID">{deviceInfo.sn}</Descriptions.Item>
                                <Descriptions.Item label="软件版本号">{deviceInfo.appVersion}</Descriptions.Item>
                                <Descriptions.Item label="所属单位">{deviceInfo.unitName}</Descriptions.Item>
                                <Descriptions.Item label="品牌型号">{deviceInfo.brandName} - {deviceInfo.modelName}</Descriptions.Item>
                                <Descriptions.Item label="国标号">{deviceInfo.gbId}</Descriptions.Item>
                                <Descriptions.Item label="手机卡ICCID">{deviceInfo.iccdi}</Descriptions.Item>
                                <Descriptions.Item label="IMEI">{deviceInfo.imei}</Descriptions.Item>
                                <Descriptions.Item label="号码" span={2}>{deviceInfo.phone}</Descriptions.Item>
                                <Descriptions.Item label="网络类型">{networkType[deviceInfo.networkType]}</Descriptions.Item>
                                <Descriptions.Item label="物理地址">{deviceInfo.macAddr}</Descriptions.Item>
                                <Descriptions.Item label="IP地址" >{deviceInfo.ip}</Descriptions.Item>
                                <Descriptions.Item label="CPU使用率">{deviceInfo.cpuRate}%</Descriptions.Item>
                                <Descriptions.Item label="内存使用率">{deviceInfo.memoryRate}%</Descriptions.Item>
                                <Descriptions.Item label="剩余存储空间">{deviceInfo.lastStorage}GB</Descriptions.Item>
                                <Descriptions.Item label="剩余电量">{deviceInfo.power}%</Descriptions.Item>
                                <Descriptions.Item label="执法仪温度" span={2}>{deviceInfo.temperature}℃</Descriptions.Item>
                                <Descriptions.Item label="当前使用人/用户名">{deviceInfo.realname}/{deviceInfo.username}</Descriptions.Item>
                                <Descriptions.Item label="当前位置">经度: {deviceInfo.lng}, 纬度: {deviceInfo.lat}</Descriptions.Item>
                                <Descriptions.Item label="更新时间">{deviceInfo.updatedAt}</Descriptions.Item>

                            </Descriptions>
                            <Descriptions title="工作状态" column={3}>
                                <Descriptions.Item label="人脸识别">
                                    {deviceInfo.isFr === 1 ? (
                                        <Tag color="#f50">使用中</Tag>
                                    ) : (
                                            <Tag color="#cfcfcf">未使用</Tag>
                                        )}
                                </Descriptions.Item>
                                <Descriptions.Item label="车牌识别">
                                    {deviceInfo.isLpr === 1 ? (
                                        <Tag color="#f50">使用中</Tag>
                                    ) : (
                                            <Tag color="#cfcfcf">未使用</Tag>
                                        )}
                                </Descriptions.Item>
                                <Descriptions.Item label="可视化调度">
                                    {deviceInfo.isSchedule === 1 ? (
                                        <Tag color="#f50">使用中</Tag>
                                    ) : (
                                            <Tag color="#cfcfcf">未使用</Tag>
                                        )}
                                </Descriptions.Item>
                            </Descriptions>
                            {/* <div>
                                <Button type="primary">实时视频</Button>
                                <Button type="primary">拍照上传</Button>
                                <Button type="primary">定位上传</Button>
                                <Button type="primary">推送消息</Button>
                            </div> */}
                        </>
                    }

                </Card>
            </Scrollbars>
        )
    }
}
export default DeviceInfo